<template>
  <el-dialog
    :title="this.SelectFileData.title"
    width="20%"
    :visible.sync="SelectFileData.deleteDialog"
  >
    <!-- ref="form" :model="form" -->
    <el-form label-width="100px">
      <el-form-item label="源知识库">
        <div class="block">
          <el-cascader
            ref="form"
            v-model="value"
            :options="optionsNew"
            :props="{
              expandTrigger: 'hover',
              value: 'id',
              label: 'name',
              children: 'children'
            }"
            @change="handleChange"
          />
        </div>
      </el-form-item>
      <el-form-item v-if="this.treeData != ''" label="模板文件">
        <div class="tree">
          <el-tree
            ref="treeForm"
            :data="treeData"
            :props="treeProps"
            node-key="value"
            show-checkbox
            @check-change="handleCheckChange"
          >
            <template slot-scope="scope">
              <span>
                <svg class="icon" aria-hidden="true">
                  <use
                    :xlink:href="iconType(scope.data.tag.fileExtension).class"
                  />
                </svg>
                {{ scope.data.label }}
              </span>
            </template>
          </el-tree>
        </div>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="SelectFileData.deleteDialog = false">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { listTeamTree } from '@/api/fd/repository.js'
import { listTreeFolderOnlyFolder, listTreeFolder } from '@/api/fd/folder.js'
import { unity } from '@/styles/js/setIconType.js'
import permissionList from '@/utils/permissionList.js'

export default {
  props: ['SelectFileData'],
  data() {
    return {
      iconType: unity.setIconType,
      treeProps: {
        children: 'children',
        label: 'label',
        id: 'value'
      },
      options: [],
      optionsNew: [],
      value: '',
      value2: '',
      treeData: [],
      treeData2: [],
      checkedId: '',
      checkedId2: '',
      repositoryId: '',
      checked: false,
      templateData: { document: '', folder: 0, repositoryId: '' },
      radio: 1,
      sourceFolder: false
    }
  },
  watch: {},
  mounted() {
    // 目标知识库
    listTeamTree({
      permission: permissionList.VISIBLE + permissionList.NEW
    }).then((res) => {
      res.data.map((item) => {
        if (!item.children) {
          item.disabled = true
        }
      })
      this.options = res.data
    })

    // 源知识库
    listTeamTree({
      permission: permissionList.VISIBLE + permissionList.MOVE
    }).then((res) => {
      res.data.map((item) => {
        if (!item.children) {
          item.disabled = true
        }
      })
      this.optionsNew = res.data
    })
  },
  methods: {
    handleChange(row) {
      const data = this.getPermission(this.optionsNew, row[row.length - 1])
      // 判断当前知识库是否有新增权限
      if ((permissionList.NEW & data.permissions) != permissionList.NEW) {
        this.sourceFolder = true
        this.radio = 2
      }
      listTreeFolder({ repositoryId: row[row.length - 1] }).then((res) => {
        this.checkedId = ''
        this.templateData.document = ''
        this.treeData = res.data.data
        this.getItem(this.treeData)
        this.templateData.repositoryId = row[row.length - 1]
      })
    },
    handleChange2(row) {
      this.templateData.repositoryId = row[row.length - 1]
      listTreeFolderOnlyFolder({ repositoryId: row[row.length - 1] }).then(
        (res) => {
          this.treeData2 = res.data.data
        }
      )
    },
    /**
     * 递归查询知识库信息
     * @param optionsNew 树图
     * @param repositoryId 知识库id
     * @returns {*}
     */
    getPermission(optionsNew, repositoryId) {
      for (let i = 0; i < optionsNew.length; i++) {
        const item = optionsNew[i]
        if (item.id == repositoryId) {
          return item
        }
        if (item.children) {
          const data = this.getPermission(item.children, repositoryId)
          if (data != null) {
            return data
          }
        }
      }
    },
    handleCheckChange(data, checkbox, node) {
      if (checkbox === true) {
        this.templateData.document = data
        this.checkedId = data.value
        this.$refs.treeForm.setCheckedNodes([data])
        const id = this.$refs.treeForm.getHalfCheckedKeys()
        this.templateData.folder = id[0]
      } else {
        this.templateData.document = ''
      }
    },

    handleCheckChange2(data, checkbox, node) {
      if (checkbox === true) {
        this.templateData.folder = data.value
        this.checkedId2 = data.value
        this.$refs.treeForm2.setCheckedNodes([data])
      }
    },
    confirm() {
      if (this.templateData.document == '') {
        this.$message.warning('请选择模板文件')
        return
      }
      this.templateData.SelectFileData = this.SelectFileData
      this.SelectFileData.deleteDialog = false
      this.$message.success('文件选择成功')
      this.$emit('templateData', this.templateData)
      console.log(this.templateData, 'this.templateData')
    },
    // 递归树
    getItem(data) {
      data.forEach((item) => {
        if (item.move == null) {
          item.disabled = true
        }
      })
    }
    //       let data = {
    //     destFolderId: this.templateData.folder.value || 0,
    //     destRepositoryId: this.repositoryId,
    //     documentId: this.checkedId
    //   }
    //   copy(data).then((res) => {
    //     if (res.code == 1) {
    //       this.$message.success('文件选择成功')
    //     }
    //   })
  }
}
</script>

<style>
</style>
